<template>
	<view style="display: flex;justify-content: flex-end;align-items: center;width: 100%;">
		<picker mode="multiSelector" :range="[province, city, area]" range-key="name" :value="regionIndex" @columnchange="columnRegion" @change="changeRegion">
			<view class="uni-input" v-if="regionText[0] && regionText[1] && regionText[2]">{{regionText[0]}},{{regionText[1]}},{{regionText[2]}}</view>
		</picker>
		<u-icon name="arrow-right"></u-icon>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		name: 'area',
		data() {
			return {
				province: [],
				city: [],
				area: [],
				regionText:['','',''],
				regionIndex:[0,0,0],
			}
		},
		props:{
			region:{
				type:Array,
				default:[]
			}
		},
		mounted() {
			this.initGetArea();
		},
		methods: {
			...methods,
			initGetArea: function(){
				this.getArea(0,0);
				this.getArea(this.region[0],1);
				this.getArea(this.region[1],2);
			},
			getArea:function(pid,level,column=false){
				this.$get('common/area',{pid:pid}).then(res=>{
					if(level===0){
						this.province=res;
					}
					if(level===1){
						this.city=res;
						if(column){
							this.getArea(res[0].id,2,true);
							return;
						}
					}
					if(level===2){
						this.area=res;
						if(column){						
							return;
						}
					}				
					for(let i=0;i<res.length;i++){
						if(res[i].id==this.region[level]){
							this.regionIndex[level]=i;
							this.regionText[level]=res[i].name;
						}
					}
				});
			},
			changeRegion: function(e) {
				this.regionIndex=e.detail.value;
				this.region[0]=this.province[this.regionIndex[0]].id;
				this.region[1]=this.city[this.regionIndex[1]].id;
				this.region[2]=this.area[this.regionIndex[2]].id;
				this.regionText=[this.province[this.regionIndex[0]].name,this.city[this.regionIndex[1]].name,this.area[this.regionIndex[2]].name];
				this.$emit('changeRegion',this.region);
			},
			columnRegion:function(e){
				let level=e.detail.column;
				let pid;
				if(level===0){
					pid=this.province[e.detail.value].id;
					this.regionIndex[0]=e.detail.value;
					this.regionIndex[1]=0;
					this.regionIndex[2]=0;
					this.getArea(pid,1,true);
				}
				if(level===1){
					pid=this.city[e.detail.value].id;
					this.regionIndex[1]=e.detail.value;
					this.regionIndex[2]=0;
					this.getArea(pid,2,true);
				}		
			},
		}
	}
</script>

<style>
</style>